<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>回调形式的refs</title>
  </head>
  <body>
    <div id="test"></div>

    <script
      src="https://unpkg.com/react@16/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      class Demo extends React.Component {
        //展示左侧输入框的数据
        showLData = () => {
          console.log(this.input1.value);
        };

        showRData = () => {
          console.log(this.input2.value);
        };
        render() {
          return (
            <div>
              <input
                ref={(e) => {
                  console.log(e);
                  this.input1 = e;
                }}
                type="text"
                placeholder="点击按钮提示数据"
              />
              <button ref="button" onClick={this.showLData}>
                点我提示左侧数据
              </button>
              <input
                ref={(e) => {
                  this.input2 = e;
                }}
                onBlur={this.showRData}
                type="text"
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }

      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>
